<template>
  <el-dialog v-dialogDrag
             :title="!this.dataForm.id ? '新增' : '详情'"
             :close-on-click-modal="false"
             :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-width="140px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="业务系统编号" prop="bizCode" class="rdonly" :readonly="true">
            <el-input v-model="dataForm.bizCode" placeholder="业务系统编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="批次编号" prop="batchCode" class="rdonly" :readonly="true" >
            <el-input v-model="dataForm.batchCode" placeholder="批次编号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="任务编号" prop="taskCode">
            <el-input v-model="dataForm.taskCode" placeholder="任务编号" :class="taskEdit ? 'rdonly': ''" :readonly="taskEdit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务说明" prop="taskName">
            <el-input v-model="dataForm.taskName" placeholder="任务说明"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="应用模式" prop="appMode">
            <el-select v-model="dataForm.appMode" placeholder="请选择" style="width: 100%">
              <el-option v-for="(item, index) in dict.AppMode" :key="index"
                         :label="item.value+':'+item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="应用名称" prop="appJarName">
            <el-input v-model="dataForm.appJarName" placeholder="应用名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="执行方式" prop="scheduleType">
            <el-select v-model="dataForm.scheduleType" placeholder="请选择" style="width: 100%"
                       @change="scheduleChange($event)">
              <template v-for="(item, index) in dict.ScheduleType">
              <el-option v-if=" !(batchBatchType == '0' && item.value == 'C') " :key="index"
                         :label="item.value+':'+item.label" :value="item.value"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="执行时间" prop="scheduleConf" v-if="cronEnable">
            <div>
              <el-input v-model="dataForm.scheduleConf" placeholder="执行时间" class="input-with-inp"
                        :readonly="true" ></el-input>
              <el-button slot="append" icon="el-icon-date" @click="showDialog"
                         style=" position: absolute; height: 38px; top: 1px; right: 1px;
                         border: 0px; border-left: 1px solid #DCDFE6; border-bottom-left-radius: 0px; border-top-left-radius: 0px; "></el-button>
            </div>
            <div style="position: absolute; z-index: 10000">
              <vcrontab2 ref="Vcrontab2" v-if="showCronVisible2" @fill="crontabFill" @hide="crontabHide"
                         :expression="expression2"></vcrontab2>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="失败忽略" prop="failIgnore">
            <el-select v-model="dataForm.failIgnore" placeholder="请选择" style="width: 100%">
              <el-option v-for="(item, index) in dict.FailIgnore" :key="index"
                         :label="item.value+':'+item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="序号" prop="orders">
            <el-input v-model="dataForm.orders" placeholder="序号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!--<el-row>
        <el-col :span="12">
          <el-form-item label="启动最大延迟时间" prop="startupMaxDelay">
            <el-input v-model="dataForm.startupMaxDelay" placeholder="启动最大延迟时间"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="执行预估超时" prop="exeTimeout">
            <el-input v-model="dataForm.exeTimeout" placeholder="执行预估超时"></el-input>
          </el-form-item>
        </el-col>
      </el-row>-->
      <el-row>
        <el-col :span="12">
          <el-form-item label="启动模式" prop="appRunMode" class="el-form-itemLine">
            <el-select v-model="dataForm.appRunMode" placeholder="请选择" style="width: 100%">
              <el-option v-for="(item, index) in dict.RunMode" :key="index"
                         :label="item.value+':'+item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="启动命令" prop="appStartupCmd" class="el-form-itemLine">
        <el-input v-model="dataForm.appStartupCmd"
                  placeholder="启动命令：java -jar xxx || /bin/sh -c xxx.sh || cmd /c xxx.bat"></el-input>
      </el-form-item>
      <el-form-item label="并行机器数量" prop="az1InstNums" class="el-form-itemLine">
        <el-input v-model="dataForm.az1InstNums" placeholder="并行机器数量"></el-input>
      </el-form-item>
      <!--<el-form-item label="单实例并行线程数" prop="oneInstThreadNum">
        <el-input v-model="dataForm.oneInstThreadNum" placeholder="单实例并行线程数"></el-input>
      </el-form-item>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </div>
  </el-dialog>
</template>


<script>
  import Vcrontab2 from '../../../components/Crontab2/index'

  export default {
    data() {
      return {
        visible: false,
        cronEnable: true,
        taskEdit: false,
        cronConfig: 0,
        showCronVisible2: false,
        expression2: '',
        batchBatchType: '',
        dataForm: {
          bizCode: '',
          batchCode: '',
          taskCode: '',
          scheduleType: 'A',
          scheduleConf: '',
          orders: '10000',
          taskName: '',
          appMode: 'N',
          appJarName: '',
          startupMaxDelay: '30',
          exeTimeout: '60',
          failIgnore: '0',
          appRunMode: '2',
          appStartupCmd: '',
          az1InstNums: '1',
          az2InstNums: '0',
          az3InstNums: '0',
          resourceScore: '99',
          oneInstThreadNum: '1',
        },
        dataRule: {
          bizCode: [{required: true, message: '业务系统编号不能为空', trigger: 'blur'}],
          batchCode: [{required: true, message: '批次编号不能为空', trigger: 'blur'}],
          taskCode: [{required: true, message: '任务编号不能为空', trigger: 'blur'}],
          scheduleType: [{required: true, message: '执行方式不能为空', trigger: 'blur'}],
          scheduleConf: [{required: true, message: '执行时间不能为空', trigger: 'blur'}],
          orders: [{required: true, message: '序号不能为空', trigger: 'blur'}],
          taskName: [{required: true, message: '任务说明不能为空', trigger: 'blur'}],
          appMode: [{required: true, message: '应用模式不能为空', trigger: 'blur'}],
          appJarName: [{required: true, message: '应用名称不能为空', trigger: 'blur'}],
          startupMaxDelay: [{required: true, message: '启动最大延迟时间不能为空', trigger: 'blur'}],
          exeTimeout: [{required: true, message: '执行预估超时不能为空', trigger: 'blur'}],
          failIgnore: [{required: true, message: '失败忽略不能为空', trigger: 'blur'}],
          appRunMode: [{required: true, message: '启动模式不能为空', trigger: 'blur'}],
          appStartupCmd: [{required: true, message: '启动命令不能为空', trigger: 'blur'}],
          az1InstNums: [{required: true, message: '并行机器数量不能为空', trigger: 'blur'}],
        }
      }
    },
    components: {
      Vcrontab2
    },
    methods: {
      init(id, data) {
        this.dataForm.id = id || ''
        this.visible = true
        this.taskEdit = false;
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields();
          this.batchBatchType = data.batchBatchType;
          if (this.dataForm.id == undefined || this.dataForm.id == null || this.dataForm.id == '') {
            this.dataForm = Object.assign(this.dataForm, data)
          } else {
            this.dataForm = data;
            this.taskEdit = true;
          }
          this.scheduleChange(this.dataForm.scheduleType)
        });
      },
      scheduleChange(value) {
        if ("C" == value) {
          this.cronEnable = true;
          this.dataRule.scheduleConf.required = true;
        } else {
          this.cronEnable = false;
          this.dataForm.scheduleConf = '';
          this.dataRule.scheduleConf.required = false;
        }
      },
      crontabFill(value) {
        this.dataForm.scheduleConf = value;
        this.showCronVisible2 = false;
      },
      crontabHide() {
        this.showCronVisible2 = false;
      },
      showDialog() {
        this.expression2 = this.dataForm.scheduleConf;//传入的 cron 表达式，可以反解析到 UI 上
        if (this.cronConfig == 0) {
          if (this.showCronVisible2) {
            this.showCronVisible2 = false;
          } else {
            this.showCronVisible2 = true;
          }
        }
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            let obj = Object.assign({}, this.dataForm)
            this.getTableList(`/api/taskInfo/${!this.dataForm.id ? 'add' : 'mod'}`, obj, (data) => {
              if (data && data.code === '000000') {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
